<template>
  <view>
    <view class="search">
      <!-- 头部输入框开始 -->
      <mySearch :name='item.name' @homePage="homeClick" @searchBtn="searchClick"></mySearch>
      <!-- 头部输入框结束 -->
      <!-- 导航栏开始 -->
      <scroll-view scroll-x class="bg-white nav search-box" scroll-with-animation :scroll-left="scrollLeft">
        <view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in navList" :key="index"
          @tap="tabSelect" :data-id="index" @click="gettingData(item.id) ">
          {{item.catename}}
        </view>
      </scroll-view>
      <!-- 导航栏结束 -->
    </view>

    <!-- 动态图片开始 -->
    <view class="content paddiang">
      <myPicture @isId="skipClick" :Picture="recentUpdatesList"></myPicture>
    </view>
    <!-- 动态图片结束 -->

    <!-- 点击回到顶部 -->
    <backTop :scrollTop="backTop.scrollTop"></backTop>
  </view>
</template>

<script>
  import myPicture from '../../components/my-picture/my-picture.vue'
  import backTop from '../../components/back-top/back-top.vue'
  import mySearch from "../../components/my-search/my-search.vue"
  export default {
    components: {
      mySearch,
      backTop,
      myPicture
    },
    data() {
      return {
        backTop: {
          scrollTop: 0 //回到顶部按钮距离
        },
        recentUpdatesList: [], //最近更新数据
        navList: [], //导航条内容
        pageindex: 1, //当前页
        cdnurl: '',
        total: 0, // 总数量，用来实现分页
        isloading: false, // 是否正在请求数据

        TabCur: 0,
        scrollLeft: 0,
        item: {}, //大家都在搜的数据
        name: '' //搜索框输入的值
      };
    },
    onLoad(option) {
      // console.log(option)
      // 获取首页传递过来的关键词
      // var item = JSON.parse(option.item)
      // this.item = item
      this.loadData() //导航条数据
      this.recentUpdates() //获取最近更新数据
    },
    // 下刷加载监听
    onPageScroll(e) {
      this.backTop.scrollTop = e.scrollTop;
    },
    // 下拉到底页码索引加1
    onReachBottom() {
      // 判断是否还有下一页数据
      if (this.pageindex * 20 >= this.total) return this.$api.msg('数据加载完毕!')
      // 判断是否正在请求其它数据，如果是，则不发起额外的请求
      // if (this.isloading) return
      this.pageindex += 1
      this.recentUpdates() //获取最近更新数据
    },
    // 方法
    methods: {
      // 导航条数据
      async loadData() {
        const {
          data: res
        } = await uni.$http.get('/api/emjio/getcate')
        // 请求失败
        if (res.code !== 1) return this.$api.msg()
        // 请求成功，为 data 中的数据赋值
        this.navList = res.data

      },
      // 显示图片数据
      async recentUpdates(id) {
        console.log(id,111)
        // ** 打开节流阀
        this.isloading = true
        const {
          data: res
        } = await uni.$http.get(`/api/emjio/getemjio/stype/2/pageindex/${this.pageindex}/typeid/${id}`)
        console.log(res)
        // ** 关闭节流阀
        this.isloading = false
        if (res.code !== 1) return this.$api.msg()
        this.total = res.data.total
        this.cdnurl = JSON.parse(this.$api.get('cdnurl'))
        res.data.data.forEach(item => {
          if (item.isurl == 0) {
            var obj = new Object()
            obj.imgname = this.cdnurl + '/' + item.imgname
            var arr = item.imgname.substring(item.imgname.length - 3, item.imgname.length)
            if (arr == 'gif') {
              obj.pic = "gif"
            }
            this.recentUpdatesList.push(obj)
          }
        })
      },
      gettingData(id) {
        this.recentUpdatesList=[]
        this.recentUpdates(id)
      },

      // 回到顶部按钮
      tabSelect(e) {
        this.TabCur = e.currentTarget.dataset.id;
        this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
      },
      // 点击首页回到第一个页面
      homeClick() {
        uni.switchTab({
          url: '../../pages/index/index'
        })
      },
      // 点击搜索
      searchClick() {
        console.log(11)
      },
      // 点击图片跳转
      skipClick() {
        uni.navigateTo({
          url: `../../subpkg/meme/meme`
        })
      }
    }
  }
</script>

<style lang="scss">
  .content {
    background-color: #fff;
  }

  // 导航栏吸顶
  .search {
    // 设置定位效果为“吸顶”
    position: sticky;
    // 吸顶的“位置”
    top: 0;
    // 提高层级，防止被轮播图覆盖
    z-index: 999;
    background-color: #fdd201;

    .search-title {
      height: 120rpx;
      padding: 30rpx 30rpx;
      display: flex;

      .search-nav {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 26rpx;

        .search-home {
          width: 120rpx;
          height: 100%;
          color: #888;
          background-color: #e5e2e5;
          border-top-left-radius: 30rpx;
          border-bottom-left-radius: 30rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          .search-left {
            width: 100%;
            text-align: center;
            border-right: 1px solid #888;
          }
        }

        .search-ipt {
          width: 450rpx;
          height: 100%;
          background-color: #e5e2e5;
          display: flex;
          align-items: center;

          text {
            margin: 0 10rpx;
          }

          input {
            width: 100%;
            height: 100%;
          }
        }

        .search-btn {
          width: 120rpx;
          height: 100%;
          color: #fff;
          background-color: #00b26a;
          border-top-right-radius: 30rpx;
          border-bottom-right-radius: 30rpx;
          text-align: center;
          line-height: 60rpx;

        }
      }

    }
  }

  .cur {
    color: #fcbe17;
  }
</style>
